import './ChildrenCoursePage.scss'
import { DoubleLeftOutlined } from '@ant-design/icons'
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { localGetCourseListAPI } from '@/apis/student.js'
import CourseItem from './components/CourseItem/CourseItem'
import { fetchGetChildrenCourseList } from '@/store/modules/parent';
import { useSelector,useDispatch } from 'react-redux';

export default function ChildrenCoursePage() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { user_status } = useSelector(state => state.user);
    const { chilrenCourseList } = useSelector(state => state.parent);
    const [courseList, setCourseList] = useState([]);

    const colorBox = [
        {
            dark: '#ee4863',
            light: '#f8b37f'
        },
        {
            dark: '#1781b5',
            light: '#0eb0c9'
        },
        {
            dark: '#55bb8a',
            light: '#bacf65'
        },
        {
            dark: '#61649f',
            light: '#c08eaf'
        },
    ]


    const handleBackClick = function () {
        navigate('/parent');
    }

    useEffect(() => {
        async function getCourseList() {
            // const res = await localGetCourseListAPI();
            // setCourseList(res.data);

            if(chilrenCourseList.length === 0) {
                dispatch(fetchGetChildrenCourseList(user_status.student_id,user_status.token));
            }
        }

        getCourseList();
    }, [])

    return (
        <div className="ChildrenCoursePage">
            <nav>
                <button onClick={handleBackClick}> <DoubleLeftOutlined /> 返回</button>
                <h1>{user_status.student_name}</h1>
            </nav>
            <div className='course-place'>
                {chilrenCourseList.map((ele, index) => <CourseItem info={ele} key={index} randbgk={colorBox[index % 4]} />)}
            </div>
        </div>
    )
}